import React, { useEffect, useState } from 'react';
import { Select, Spin, Table, ConfigProvider, Pagination } from 'antd';
import * as echarts from 'echarts';
import '../BigKh/style.less';
import { history } from 'umi';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
export default function Index() {
  // 控制 数据报表 && 图形报表 激活状态
  // const [reportFormActive, setReportFormActive] = useState(1)
  const [echarsType, setEcharsType] = useState('pie');
  const [data, setdata] = useState([
    { id: 1, value: 15, itemStyle: { color: '#26c0c0' }, name: '汽车制造商' },
    {
      id: 2,
      value: 5,
      itemStyle: { color: '#b5c334' },
      name: '分销商',
    },
    {
      id: 3,
      value: 22,
      itemStyle: { color: '#fcce10' },
      name: '加盟商',
    },
    {
      id: 4,
      value: 13,
      itemStyle: { color: '#e87c25' },
      name: '零售商',
    },
    {
      id: 5,
      value: 8,
      itemStyle: { color: '#27727b' },
      name: '医院',
    },
    {
      id: 6,
      value: 5,
      itemStyle: { color: '#fe8463' },
      name: '其它医疗机构',
    },
    {
      id: 7,
      value: 6,
      itemStyle: { color: '#9bca63' },
      name: '医疗设备生产商',
    },
    {
      id: 8,
      value: 21,
      itemStyle: { color: '#fad86' },
      name: '安装工程公司',
    },
    {
      id: 9,
      value: 14,
      itemStyle: { color: '#f3a43b' },
      name: '工程设备贸易公司',
    },
    {
      id: 10,
      value: 12,
      itemStyle: { color: '#60c0dd' },
      name: '连锁商贸',
    },
    {
      id: 11,
      value: 13,
      itemStyle: { color: '#d7504b' },
      name: '食品贸易公司',
    },
    {
      id: 12,
      value: 10,
      itemStyle: { color: '#c6e579' },
      name: '代理商',
    },
    {
      id: 13,
      value: 8,
      itemStyle: { color: '#f4e001' },
      name: '直接客户',
    },
    {
      id: 14,
      value: 10,
      itemStyle: { color: '#c1232b' },
      name: '电子产品制造商',
    },
    {
      id: 15,
      value: 8,
      itemStyle: { color: '#c0392b' },
      name: '视频生产公司',
    },
  ]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const columns = [
    {
      title: '序号',
      width: '18%',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: '客户分类',
      dataIndex: 'name',
      key: 'name',
      sorter: (a, b) => {
        console.log(a, b);
        return a.name.length - b.name.length;
      },
    },
    {
      title: '客户数量',
      dataIndex: 'value',
      key: 'value',
      sorter: (a, b) => {
        console.log(a, b);
        return a.value - b.value;
      },
    },
  ];
  const init = (val) => {
    var myChart = echarts.init(document.getElementById('kh'));
    if (val === 'bar' || val === 'line') {
      myChart.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        xAxis: {
          type: 'category',
          data: data.map((item) => item.name),
        },
        yAxis: {
          type: 'value',
          data: data.map((item) => item.value),
        },
        // 缩放
        dataZoom: [
          {
            type: 'inside',
          },
        ],
        series: [
          {
            type: val,
            itemStyle: {
              borderRadius: 10,
              borderColor: 'white',
            },
            data: data,
            barWidth: 30, //柱图宽度
          },
        ],
      });
      return;
    }
    myChart.setOption({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '客户数量',
          type: val,
          // radius: ['40%', '70%'],
          itemStyle: {
            borderRadius: 10,
            borderColor: 'white',
          },
          data: data,
        },
      ],
    });
  };
  useEffect(() => {}, []);

  const onSelect = (value) => {
    setTimeout(() => {
      init(value);
    }, 100);
    setEcharsType(value);
  };
  const [nums, setnums] = useState(1);
  //echars图表
  const setContent = () => {
    return (
      <div>
        <div className="bMb_top">
          <div>
            <span>图标类型：</span>
            <Select
              defaultValue="饼形图"
              style={{
                width: 120,
              }}
              onChange={onSelect}
              options={[
                {
                  value: 'pie',
                  label: '饼形图',
                },
                {
                  value: 'funnel',
                  label: '漏斗图',
                },
                {
                  value: 'line',
                  label: '折线图',
                },
                {
                  value: 'bar',
                  label: '柱状图',
                },
              ]}
            />
          </div>
          <div>
            <span>图标宽度：</span>
            <Select
              defaultValue="500"
              style={{
                width: 120,
              }}
              // onChange={handleChange}
              options={[
                {
                  value: '500',
                  label: '500',
                },
                {
                  value: '600',
                  label: '600',
                },
                {
                  value: '800',
                  label: '800',
                },
              ]}
            />
          </div>
          <div>
            <span>图标高度：</span>
            <Select
              defaultValue="500"
              style={{
                width: 120,
              }}
              //   onChange={handleChange}
              options={[
                {
                  value: '500',
                  label: '500',
                },
                {
                  value: '600',
                  label: '600',
                },
                {
                  value: '800',
                  label: '800',
                },
              ]}
            />
          </div>
        </div>
        <div className="bmb_btm">
          <div id="kh" style={{ width: '100%', height: '400px' }}></div>
        </div>
      </div>
    );
  };
  const setTable = () => {
    return (
      <div className="bmb_btm">
        <Table
          columns={columns}
          rowKey={(record) => record.id}
          pagination={false}
          dataSource={data}
          rowSelection={rowSelection}
        />
        <ConfigProvider locale={zh_CN}>
          <Pagination
            total={data.length}
            showTotal={(total) => `共有条 ${total} 数据`}
            current={1}
          />
        </ConfigProvider>
      </div>
    );
  };
  const setDate = (num) => {
    if (num == 2) {
      setnums(2);
      setTimeout(() => {
        init('pie');
      }, 100);
      return;
    } else if (num == 1) {
      setnums(1);
      return;
    }
  };
  return (
    <div className="bigKh">
      <div className="bigTop system_management_top">
        <button>过滤</button>
        <button
          onClick={() => {
            location.reload();
          }}
        >
          还原
        </button>
        <button>打印</button>
        <button>查看日志</button>
        <button>导出</button>
        <div className="content_bkn">
          <button
            style={{ background: nums === 1 ? '#7BBDFF' : 'none' }}
            onClick={() => setDate(1)}
          >
            数据报表
          </button>
          <button
            style={{ background: nums === 2 ? '#7BBDFF' : 'none' }}
            onClick={() => setDate(2)}
          >
            图形报表
          </button>
        </div>
        <button
          onClick={() => {
            history.go(-1);
          }}
        >
          返回
        </button>
      </div>

      <div className="bigMain">
        <div className="bigMian_top">
          <div className="bmt_top">
            <div>
              <span>客户行业：</span>
              <input type="text" />
            </div>
            <div>
              <span>客户分类：</span>
              <input type="text" />
            </div>
            <div>
              <span>价值评估：</span>
              <input type="text" />
            </div>
            <div>
              <span>添加时间：</span>
              <input type="Date" />
              <span> - </span>
              <input type="Date" />
            </div>
            <div>
              <button>查询</button>
            </div>
          </div>
          <div className="bmt_btm">
            <span>客户来源统计</span>
          </div>
        </div>
        {/* 图表 */}
        <div className="bigMian_btm">
          {nums == 1 ? setTable() : setContent()}
        </div>
      </div>
    </div>
  );
}
